import React from 'react'
import { Button, Modal, message, Select, Radio } from 'antd'
import { BaseListPage, IBaseListPageProps, IBaseListPageState, uaaApp } from '../../../lib'
import { UdModal, UdModalForm } from '../../../lib/ui/UdModal'
import { http } from '../../../lib/core/http'
import apis from '@/apis/SystemSettings'
import comApis from '@/apis'
import StateSwitchBtn from '@/components/StateSwitchBtn'
import udMainStore from '@/store/UdMain'

const Option = Select.Option
const AddBtnAuth = 'user_system_settings_permissions_add'
const UpdateBtnAuth = 'user_system_settings_permissions_update'

class CapitalCostList extends BaseListPage<ICapitalCostListProps, ICapitalCostListState> {

  protected saveParamsWithUrl: boolean = true
  // 隐藏掉头曲二曲
  public hideArr: any = ['头曲','二曲','泸州老窖头曲酒类销售有限公司','泸州老窖二曲酒类销售有限公司']
  public brandCompanies = udMainStore.brandList.filter(item => this.hideArr.indexOf(item.title) === -1)

  constructor(props: ICapitalCostListProps) {
    super(props)

    this.state = {
      title: '资金费用查看权限配置',
      queryApi: apis.List,
      method: 'GET',
      conditions: [
        { id: 'brandName', label: '销售组织',render: ()=>(
          <Select placeholder="请选择销售组织">
            {this.brandCompanies.map(({value,title})=>(<Option key={value} value={title}>{title}</Option>))}
          </Select>
        ) },
      ],
      rowKey: 'id',
      columns: [
        ['组织代码', 'brandCode'],
        ['销售组织', 'brandName'],
        ['资金查看', 'captialStatus',
          (text, record, index)=>(
            <StateSwitchBtn
              loading={this.state.switchRequestRow.id===record.id&&this.state.switchRequestRow.type===1}
              checked={text===1}
              clickHandle={(checked, cb)=>this.setCapitalCost(record,checked,1,cb)}
              disabled={!uaaApp.canUse(UpdateBtnAuth)}
            />
          )
        ],
        ['保证金查看', 'depositStatus',
          (text, record, index)=>(
            <StateSwitchBtn
              loading={this.state.switchRequestRow.id===record.id&&this.state.switchRequestRow.type===2}
              checked={text===1}
              clickHandle={(checked, cb)=>this.setCapitalCost(record,checked,2,cb)}
              disabled={!uaaApp.canUse(UpdateBtnAuth)}
            />
          )
        ],
        ['费用查看', 'feeStatus',
          (text, record, index)=>(
            <StateSwitchBtn
              loading={this.state.switchRequestRow.id===record.id&&this.state.switchRequestRow.type===3}
              checked={text===1}
              clickHandle={(checked, cb)=>this.setCapitalCost(record,checked,3,cb)}
              disabled={!uaaApp.canUse(UpdateBtnAuth)}
            />
          )
        ],
        ['创建人', 'createdBy'],
        ['创建时间', 'createdTime'],
      ],
      leftBtns: [
        uaaApp.canUse(AddBtnAuth)&&<Button type="primary" onClick={this.addHandle}>新增</Button>
      ],
      tableProps: {
        rowSelection: null,
      },
      switchRequestRow: {
        id: '',
        type: 0,
      },
      brandCompanies: [],
    }
  }

  public componentWillMount() {
    super.componentWillMount()
  }

  public getBrandCompanyList = ()=> {
    http.get(comApis.BrandCompanySelectList).then(res=>{
      const brandCompanies = res.data.map(({brandCode:value,brandInfoName:title})=>({value,title}))
      this.setState({
        brandCompanies,
      })
    })
  }

  private addHandle = () => {
    const brandCompanies = this.brandCompanies
    UdModal.open({
      title: '新增',
      content: <UdModalForm items={[
        { id: 'brandCode', label: '品牌公司',
          rules: [{required: true, message: '品牌公司不能为空'}],
          render: <SelectCm placeholder='请选择品牌公司' options={brandCompanies} />
        },
        { id: 'captialStatus', label: '资金查看', render: <RadioCm /> },
        { id: 'depositStatus', label: '保证金查看', render: <RadioCm /> },
        { id: 'feeStatus', label: '费用查看', render: <RadioCm /> },
      ]} />,
      onOk: (values) => {
        // const brandName = brandCompanies.find(item=>item.value==values.brandCode)?.title
        // const params = {brandName,...values}
        return http.post(apis.Add, values).then(res=>{
          message.success('新增成功')
          this.query()
        })
      }
    })
  }

  private setCapitalCost = (record,checked,type,cb?) => {
    const { id, brandCode, captialStatus, depositStatus, feeStatus } = record
    const switchRequestRow = {
      id,
      type,
    }
    this.setState({
      switchRequestRow,
    })

    // let params: any = {id, brandCode, captialStatus, depositStatus, feeStatus}
    let params: any = { id }
    const status = checked?1:0
    switch(type) {
      case 1:
        params["captialStatus"] = status
        break
      case 2:
        params["depositStatus"] = status
        break
      case 3:
        params["feeStatus"] = status
        break
    }
    http.put(apis.UpdateAuth, params).then(res=>{
      message.success('操作成功')
      cb&&cb(checked)
    }).catch(()=>{
      cb&&cb(!checked)
    }).finally(() => {
      const switchRequestRow = {id:'',type:0}
      this.setState({
        switchRequestRow,
      })
    })
  }

}

function RadioCm(props) {
  const options = [
    { value: 1, label: '开放' },
    { value: 0, label: '关闭' },
  ]
  return (
    <Radio.Group onChange={props.onChange} value={props.value} options={options} />
  )
}

function SelectCm(props) {
  const { options } = props
  return (
    <Select {...props} value={props.value||undefined}>
      {options.map(({value,title})=>(<Option value={value}>{title}</Option>))}
    </Select>
  )
}

interface ICapitalCostListProps extends IBaseListPageProps {

}

interface ICapitalCostListState extends IBaseListPageState {
  switchRequestRow: {id: string, type: number}
  brandCompanies: [{value: string, title: string}?]
}

export default CapitalCostList
